'use strict';

var React = require('react');

var ListActions = require('../actions/list');

var PanelComponent = React.createClass({
  getInitialState : function(){
    // 在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。
    return {data:[]};
  },
  getDefaultProps : function(){
    // 在组件类创建的时候调用一次，然后返回值被缓存下来。如果父组件没有指定 props 中的某个键，则此处返回的对象中的相应属性将会合并到 this.props （使用 in 检测属性）。
    
    // 该方法在任何实例创建之前调用，因此不能依赖于 this.props。另外，getDefaultProps() 返回的任何复杂对象将会在实例间共享，而不是每个实例拥有一份拷贝。
  },
  componentDidMount : function(){
    // 注册 store 响应事件
    // ListStore.bind( 'change', this.listChanged );
  },
  componentWillUnmount : function(){
    //取消注册store响应事件
    // ListStore.unbind( 'change', this.listChanged );
  },
  handleSubmit : function(e){
    // e.preventDefault();
    var text= this.refs.nick.getDOMNode().value.trim();
    if(!text){
        return;
    }
    this.refs.nick.getDOMNode().value = '';
    ListActions.set(text);
    return;

    //  触发事件通知dispatcher :  
    /* AppDispatcher.dispatch({  
       eventName: 'new-item',
       newItem: { name: 'Samantha' }
    */

   // 为了更好的管理 dispatcher 可以建立 dispatcher 的代理层 actions 来管理 :例如
    /*
    ListActions = {
      add: function( item ) {
        AppDispatcher.dispatch({
          eventName: 'new-item',
          newItem: item
        });
      }
    };
    */

  },
  render: function() {
    return (
      /* jshint ignore:start */
      <div>
        <form onSubmit={ this.handleSubmit }>
            <input type="text" ref="nick"/>
            <input type="submit" value="submit" />   
        </form>
      </div>
      /* jshint ignore:end */
    );
  }
});

module.exports = PanelComponent;
